<template>
  <div class="header">
    <div class="book">
      <div class="book-list">
        <ul>
          <li v-for="item in booklist" :key="item.id">
            <img :src="item.img" alt />
            <p @click="tanchu(item)" class="bookname">{{ item.name }}</p>
            <p class="author">{{ item.author }}</p>
            <div class="add-cart">
              <div>
                <span class="price">￥{{ item.price }}</span>
                <span class="original_price">{{ item.priceold }}</span>
              </div>
              <!-- 加入购物车按钮 -->
              <el-button @click="addCart(item)" class="cart" type="warning" icon="ShoppingCart" round></el-button>
            </div>
          </li>
        </ul>
        <!-- 书籍信息弹出框 -->
        <div class="eject">
          <el-dialog v-model="centerDialogVisible" title="书籍信息" width="28%" center>
            <el-row>
              <el-col>
                <el-card :body-style="{ padding: '5px'}">
                  <img :src="bookinfo.img" class="image" />
                  <div style="padding: 14px">
                    <p class="bookname">{{ bookinfo.name }}</p>
                    <p class="author">{{ bookinfo.author}}</p>
                  </div>
                  <div style="margin:0 0 5px 17px;padding-bottom:10px">
                    <span class="price">￥{{ bookinfo.price}}</span>
                    <span class="original_price">{{ bookinfo.priceold}}</span>
                    <span style="float:right;margin-right:20px">库存：{{ bookinfo.store }}</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-dialog>
        </div>
      </div>
      <!-- 分页查询 -->
      <div class="page">
        <div v-if="booklist != null">
          <el-pagination
            :total="total"
            :current-page="params.pageNum"
            :page-size="params.pageSize"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            layout=" total, sizes, prev, pager, next"
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBookPage } from "../api/book/Book.js";
import { addCart } from "../api/cart/Cart.js";

export default {
  name: "Content",
  data() {
    return {
      booklist: null, // 书籍数组数据
      bookinfo: null, // 书籍详细数据
      total: 0, // 总数据
      userinfo: null, // 用户信息
      centerDialogVisible: false, // 书籍信息弹出框
      params: {
        pageNum: 1,
        pageSize: 10,
        name: ""
      }
    };
  },
  created() {
    this.load(this.params);
  },
  // 监听输入框输入的书籍名称
  computed: {
    select_param() {
      return this.$store.state.book.name;
    }
  },
  // 使用深度监听，观察搜索框输入的数据，如果发生改变，则搜索相应的数据
  watch: {
    select_param: {
      // 监听到的数据，nval是发生变化后的数据，oval是原先的数据
      handler(nval, oval) {
        // 拿到新数据赋值到书籍名称参数中，使数据发生改变
        this.params.name = nval;
        // 根据书籍名称模糊搜索数据
        this.load(this.params);
      },
      deep: true, // 深度监听
      immediate: true //立即执行
    }
  },
  methods: {
    // 封装数据，可随时调用
    load(params) {
      getBookPage(params)
        .then(res => {
          this.booklist = res.data.data.records;
          this.total = res.data.data.total;
        })
        .catch(err => {});
    },

// 加入购物车
    addCart(value){
      // 处理购物车数据数据
      this.userinfo = JSON.parse(localStorage.getItem('userinfo'))
      let param = {
        userId: this.userinfo.id,
        bookId: value.id,
        bookName: value.name,
        bookAuthor: value.author,
        bookNum: 1,
        bookPrice: value.price,
        totalPrice: value.price,
        bookImg: value.img,
      }
      console.log(param);
      addCart(param).then(res => {
        console.log(res);
      })
    },

    // 切换到第几页
    handleCurrentChange(value) {
      this.params.pageNum = value;
      // 刷新数据
      this.load(this.params);
    },
    // 展示多少数据
    handleSizeChange(value) {
      this.params.pageSize = value;
      // 刷新数据
      this.load(this.params);
    },

    // 弹出书籍信息
    tanchu(value) {
      // 使用foreach循环遍历每一项数组
      this.booklist.forEach(res => {
        // 判断点击的书籍是否与数据库中的一致
        if (res.id == value.id) {
          this.bookinfo = value;
          this.centerDialogVisible = true; // 打开弹窗
        }
      });
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
.book {
  width: 1220px;
  background-color: white;
  margin: 0 auto;
  margin: 10px auto;
}
.book-list {
  width: 1220px;
  display: flex;
}
.book-list ul {
  border: 1px solid rgb(235, 230, 230);
  flex-wrap: wrap;
  padding: 10px 0;
  display: flex;
  justify-content: space-around;
}
.book-list ul li {
  width: 200px;
  height: 310px;
  border: 1px solid rgb(222, 222, 222);
  margin: 10px 20px;
}
.book-list ul li img {
  margin-top: 10px;
  width: 170px;
  height: 200px;
}
.bookname {
  margin-top: 5px;
  margin-left: 10px;
  text-align: left;
  font-size: 14px;
  color: rgb(56, 58, 61);
  cursor: pointer;
}
.bookname:hover {
  transition: 0.2s;
  color: rgb(229, 119, 17);
}
.author {
  font-size: 12px;
  margin: 5px 0 5px 10px;
  text-align: left;
  color: rgb(148, 151, 153);
}
.add-cart {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  color: red;
  font-weight: 700;
  margin: 0 5px 0 5px;
}
.original_price {
  font-size: 12px;
  color: rgb(132, 134, 138);
  text-decoration: line-through;
}
.cart {
  margin-right: 18px;
}
.page {
  width: 1220px;
  margin: 20px auto;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: center;
}
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image {
  width: 100%;
  display: block;
}
</style>

